<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="330"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';

        // Coordinates
        const y_top = 60;
        const y_bottom = 220;
        const x_left = 50;
        const x_right = 450;
        const x_center = (x_left + x_right) / 2;

        // --- Draw Wires ---
        ctx.beginPath();
        // Top wire (left part)
        ctx.moveTo(x_left, y_top);
        ctx.lineTo(x_center - 40, y_top);
        // Top wire (right part)
        ctx.moveTo(x_center + 40, y_top);
        ctx.lineTo(x_right, y_top);
        // Side wires
        ctx.moveTo(x_left, y_top);
        ctx.lineTo(x_left, y_bottom);
        ctx.moveTo(x_right, y_top);
        ctx.lineTo(x_right, y_bottom);
        // Bottom wire segments
        const diode_x_start = x_left + 70;
        const diode_x_end = diode_x_start + 40;
        const lamp_x_start = x_center - 20;
        const lamp_x_end = x_center + 20;
        const resistor_x_start = x_right - 120;
        const resistor_x_end = resistor_x_start + 60;

        ctx.moveTo(x_left, y_bottom);
        ctx.lineTo(diode_x_start, y_bottom); // To diode
        ctx.moveTo(diode_x_end, y_bottom);
        ctx.lineTo(lamp_x_start, y_bottom); // To lamp
        ctx.moveTo(lamp_x_end, y_bottom);
        ctx.lineTo(resistor_x_start, y_bottom); // To resistor
        ctx.moveTo(resistor_x_end, y_bottom);
        ctx.lineTo(x_right, y_bottom); // From resistor
        ctx.stroke();

        // --- Draw Components ---

        // 1. AC Power Supply
        ctx.beginPath();
        // Terminals
        ctx.arc(x_center - 40, y_top, 4, 0, 2 * Math.PI);
        ctx.moveTo(x_center + 44, y_top); // Reposition for second circle
        ctx.arc(x_center + 40, y_top, 4, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();

        // Sine wave symbol
        ctx.beginPath();
        ctx.moveTo(x_center - 30, y_top);
        ctx.quadraticCurveTo(x_center - 15, y_top - 15, x_center, y_top);
        ctx.quadraticCurveTo(x_center + 15, y_top + 15, x_center + 30, y_top);
        ctx.stroke();
        
        // Reset fillStyle
        ctx.fillStyle = 'black';

        // 2. Component A: Diode
        ctx.beginPath();
        const diode_y_center = y_bottom;
        const diode_y_top = diode_y_center - 15;
        const diode_y_bottom = diode_y_center + 15;
        // Triangle part
        ctx.moveTo(diode_x_start, diode_y_top);
        ctx.lineTo(diode_x_start + 20, diode_y_center);
        ctx.lineTo(diode_x_start, diode_y_bottom);
        ctx.closePath();
        // Line part
        ctx.moveTo(diode_x_start + 20, diode_y_top);
        ctx.lineTo(diode_x_start + 20, diode_y_bottom);
        ctx.stroke();
        ctx.fillText('A', diode_x_start + 10, y_bottom + 30);


        // 3. Component B: Lamp
        const lamp_x_center = x_center;
        const lamp_y_center = y_bottom;
        const lamp_radius = 20;
        // Circle
        ctx.beginPath();
        ctx.arc(lamp_x_center, lamp_y_center, lamp_radius, 0, 2 * Math.PI);
        ctx.stroke();
        // Cross
        ctx.beginPath();
        const cross_offset = lamp_radius / Math.sqrt(2);
        ctx.moveTo(lamp_x_center - cross_offset, lamp_y_center - cross_offset);
        ctx.lineTo(lamp_x_center + cross_offset, lamp_y_center + cross_offset);
        ctx.moveTo(lamp_x_center - cross_offset, lamp_y_center + cross_offset);
        ctx.lineTo(lamp_x_center + cross_offset, lamp_y_center - cross_offset);
        ctx.stroke();
        ctx.fillText('B', lamp_x_center, y_bottom + 35);


        // 4. Component C: Resistor
        const resistor_height = 25;
        ctx.beginPath();
        ctx.rect(resistor_x_start, y_bottom - resistor_height / 2, resistor_x_end - resistor_x_start, resistor_height);
        ctx.stroke();
        ctx.fillText('C', resistor_x_start + 30, y_bottom + 30);

        // --- Draw Figure Label ---
        ctx.font = 'bold 16px Arial';
        ctx.fillText('Fig. 8.2', x_center, y_bottom + 70);

    </script>
</body>
</html>